<template>
  <div class="medical-insurance-container">
    <div class="search-container">
      <el-input
        v-model="searchKeyword"
        placeholder="药品名称"
        class="search-input"
        clearable
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon> 搜索
          </el-button>
        </template>
      </el-input>
    </div>
    
    <div class="action-buttons">
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon> 添加药品
      </el-button>
      <el-button type="danger" @click="handleBatchDelete">
        <el-icon><Delete /></el-icon> 删除选中
      </el-button>
    </div>
    
    <el-table
      :data="drugsList"
      stripe
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        type="index"
        label="序号"
        width="70"
        align="center"
      />
      <el-table-column
        prop="type"
        label="药品类型"
        width="90"
        align="center"
      />
      <el-table-column
        prop="name"
        label="药品名称"
        min-width="180"
      />
      <el-table-column
        prop="brand"
        label="品名"
        width="100"
      />
      <el-table-column
        prop="spec"
        label="规格"
        min-width="200"
      />
      <el-table-column
        prop="unit"
        label="单位"
        width="80"
        align="center"
      />
      <el-table-column
        prop="price"
        label="价格"
        width="100"
        align="right"
      />
      <el-table-column
        prop="manufacturer"
        label="生产厂家"
        min-width="220"
      />
      <el-table-column
        prop="remark"
        label="备注"
        width="100"
      />
      <el-table-column
        label="操作"
        width="140"
        align="center"
      >
        <template #default="scope">
          <el-button type="primary" link @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalDrugs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    
    <!-- 添加/编辑药品对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加药品' : '编辑药品'"
      width="50%"
    >
      <el-form
        :model="drugForm"
        :rules="drugRules"
        ref="drugFormRef"
        label-width="100px"
      >
        <el-form-item label="药品类型" prop="type">
          <el-select v-model="drugForm.type" placeholder="请选择药品类型">
            <el-option label="甲类" value="甲类" />
            <el-option label="乙类" value="乙类" />
            <el-option label="丙类" value="丙类" />
          </el-select>
        </el-form-item>
        <el-form-item label="药品名称" prop="name">
          <el-input v-model="drugForm.name" placeholder="请输入药品名称" />
        </el-form-item>
        <el-form-item label="品名" prop="brand">
          <el-input v-model="drugForm.brand" placeholder="请输入品名" />
        </el-form-item>
        <el-form-item label="规格" prop="spec">
          <el-input v-model="drugForm.spec" placeholder="请输入规格" />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-select v-model="drugForm.unit" placeholder="请选择单位">
            <el-option label="盒" value="盒" />
            <el-option label="瓶" value="瓶" />
            <el-option label="袋" value="袋" />
            <el-option label="罐" value="罐" />
            <el-option label="支" value="支" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model.number="drugForm.price" placeholder="请输入价格" type="number" />
        </el-form-item>
        <el-form-item label="生产厂家" prop="manufacturer">
          <el-input v-model="drugForm.manufacturer" placeholder="请输入生产厂家" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="drugForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Delete } from '@element-plus/icons-vue';

const searchKeyword = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const totalDrugs = ref(602);
const selectedDrugs = ref([]);
const dialogVisible = ref(false);
const dialogType = ref('add');
const drugFormRef = ref(null);

const drugForm = reactive({
  id: '',
  type: '',
  name: '',
  brand: '',
  spec: '',
  unit: '',
  price: '',
  manufacturer: '',
  remark: ''
});

const drugRules = {
  type: [{ required: true, message: '请选择药品类型', trigger: 'change' }],
  name: [{ required: true, message: '请输入药品名称', trigger: 'blur' }],
  spec: [{ required: true, message: '请输入规格', trigger: 'blur' }],
  unit: [{ required: true, message: '请选择单位', trigger: 'change' }],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    { type: 'number', message: '价格必须为数字', trigger: 'blur' }
  ]
};

// 模拟药品数据
const drugsList = ref([
  {
    id: 1,
    type: '丙类',
    name: '索比他韦',
    brand: '维建莱',
    spec: '索比他韦12.5mg/片立方米75mg,利托那韦50mg',
    unit: '盒',
    price: 2712.6,
    manufacturer: '爱尔兰Fournier Laboratories Ireland Limited',
    remark: ''
  },
  {
    id: 2,
    type: '丙类',
    name: '达霉素干粉',
    brand: '易普舒',
    spec: '0.25g',
    unit: '盒',
    price: 235.8,
    manufacturer: '爱尔兰AbbVie Ireland NL B.V.',
    remark: ''
  },
  {
    id: 3,
    type: '丙类',
    name: '格卡韦干粉他韦',
    brand: '艾诺全',
    spec: '格卡韦0.1g,颇仑他韦40mg',
    unit: '盒',
    price: 4750,
    manufacturer: '爱尔兰Fournier Laboratories Ireland Limited',
    remark: ''
  },
  {
    id: 4,
    type: '丙类',
    name: '达诺韦干粉',
    brand: '艾诺卫',
    spec: '0.1g',
    unit: '瓶',
    price: 6665.99,
    manufacturer: '欧礼药业(浙江)有限公司',
    remark: ''
  },
  {
    id: 5,
    type: '丙类',
    name: '华夏2号天然因酪蛋白固体饮料(奶粉)',
    brand: '',
    spec: '400g',
    unit: '罐',
    price: 96,
    manufacturer: '上海谯佳食品有限公司',
    remark: ''
  },
  {
    id: 6,
    type: '丙类',
    name: '特殊医学用途婴儿配方粉末间歇症配方(1段)',
    brand: '',
    spec: '400g',
    unit: '罐',
    price: 137.28,
    manufacturer: '纽迪希亚(上海)有限公司',
    remark: ''
  },
  {
    id: 7,
    type: '丙类',
    name: '特殊医学用途配方食品氨基酸代谢障碍配方(2段)',
    brand: '',
    spec: '400g',
    unit: '罐',
    price: 227.04,
    manufacturer: '纽迪希亚(上海)有限公司',
    remark: ''
  },
  {
    id: 8,
    type: '丙类',
    name: '特殊医学用途非全营养配方粉末间歇症配方(3段)',
    brand: '',
    spec: '400g',
    unit: '罐',
    price: 279.84,
    manufacturer: '纽迪希亚(上海)有限公司',
    remark: ''
  },
  {
    id: 9,
    type: '丙类',
    name: '华夏2号活性米',
    brand: '',
    spec: '1000g',
    unit: '袋',
    price: 38,
    manufacturer: '上海谯佳食品有限公司',
    remark: ''
  },
  {
    id: 10,
    type: '丙类',
    name: '低蛋白大米',
    brand: '',
    spec: '1000g',
    unit: '袋',
    price: 82,
    manufacturer: '中国(天津)医药科技有限公司',
    remark: ''
  }
]);

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  // 这里应该发送请求进行搜索
  ElMessage.success('搜索关键词: ' + searchKeyword.value);
};

// 处理添加药品
const handleAdd = () => {
  dialogType.value = 'add';
  resetForm();
  dialogVisible.value = true;
};

// 处理编辑药品
const handleEdit = (row) => {
  dialogType.value = 'edit';
  resetForm();
  Object.keys(drugForm).forEach(key => {
    drugForm[key] = row[key];
  });
  dialogVisible.value = true;
};

// 处理删除药品
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除"${row.name}"吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该发送请求删除药品
    ElMessage.success(`已删除${row.name}`);
    drugsList.value = drugsList.value.filter(item => item.id !== row.id);
  }).catch(() => {});
};

// 处理批量删除
const handleBatchDelete = () => {
  if (selectedDrugs.value.length === 0) {
    ElMessage.warning('请至少选择一项');
    return;
  }
  
  ElMessageBox.confirm(`确定要删除选中的${selectedDrugs.value.length}项吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该发送请求批量删除
    const ids = selectedDrugs.value.map(item => item.id);
    drugsList.value = drugsList.value.filter(item => !ids.includes(item.id));
    ElMessage.success(`已删除${selectedDrugs.value.length}项`);
    selectedDrugs.value = [];
  }).catch(() => {});
};

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedDrugs.value = selection;
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  // 这里应该重新加载数据
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  // 这里应该重新加载数据
};

// 重置表单
const resetForm = () => {
  if (drugFormRef.value) {
    drugFormRef.value.resetFields();
  }
  Object.keys(drugForm).forEach(key => {
    drugForm[key] = '';
  });
};

// 提交表单
const submitForm = () => {
  drugFormRef.value.validate((valid) => {
    if (valid) {
      if (dialogType.value === 'add') {
        // 这里应该发送请求添加药品
        const newDrug = { ...drugForm, id: Date.now() };
        drugsList.value.unshift(newDrug);
        ElMessage.success('添加成功');
      } else {
        // 这里应该发送请求更新药品
        const index = drugsList.value.findIndex(item => item.id === drugForm.id);
        if (index !== -1) {
          drugsList.value[index] = { ...drugForm };
          ElMessage.success('更新成功');
        }
      }
      dialogVisible.value = false;
    }
  });
};

onMounted(() => {
  // 这里应该发送请求获取初始数据
  console.log('药品数据维护组件已加载');
});
</script>

<style scoped>
.medical-insurance-container {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.action-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 